<template>
    <div class="filter-condition-wrap">
        <section ref="wrapRef"
            class="cells">
            <template v-for="(item) in options"
                :key="item.id">
                <div class="cell-label"
                    :class="{ active: isActive(item.id) }"
                    @click="onChange(item)">
                    {{ item.name }}
                </div>
            </template>
        </section>

        <div v-if="state.showExpandBtn" class="expand-btn" :class="{ isExpand: state.isExpand }" @click="onExpand">
            {{ state.isExpand ? '收起' : '展开' }}
            <el-icon class="el-icon--right">
                <IconArrowDownLine />
            </el-icon>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMutationObserver } from '@vueuse/core'

interface IOption {
    id: number | string;
    name: string;
    children?: IOption[];
}

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array as () => IOption[],
        default: () => ([])
    }
})
const emit = defineEmits(['change'])

const state = reactive({
    values: [],
    showExpandBtn: false,
    isExpand: false,
})

watchPostEffect(() => {
    let v = props.modelValue ?? ''
    state.values = v
})
const wrapRef = ref(null)
let scrollHeight = 0
let defaultHeight = 0
const calcExpand = () => {
    const wrap = wrapRef.value;
    scrollHeight = wrap.scrollHeight;
    defaultHeight = wrap.offsetHeight;
    state.showExpandBtn = scrollHeight > defaultHeight;
}

useMutationObserver(wrapRef, (mutations) => {
    nextTick(() => {
        calcExpand()
    })
}, {
    childList: true,
})

onMounted(() => {
})

const isActive = (id) => {
    return state.values === id;
}

provide('isActive', isActive)

const onChange = (item) => {
    state.values = item.id;
    emit('change', state.values);
}

const onExpand = () => {
    state.isExpand = !state.isExpand;
    nextTick(() => {
        wrapRef.value.style.height = state.isExpand
            ? scrollHeight + 'px'
            : defaultHeight + 'px';
    });
}
</script>


<style lang="scss">
.filter-condition-wrap {
    --height: 32px;
    --el-checkbox-height: var(--height);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;

    .cells {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5px 10px;
        width: 100%;
        height: calc(var(--height) + 2px);
        overflow: hidden;
        transition: height .25s ease;
        font-size: inherit;

        .cell-label {
            display: flex;
            align-items: center;
            gap: 5px;
            padding-inline-start: 10px;
            padding-inline-end: 10px;
            border-radius: var(--height);
            cursor: pointer;

            &.active,
            &:hover {
                color: var(--el-color-primary);
                background-color: var(--el-color-primary-light-8);
            }
        }
    }
}

.expand-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--el-color-primary);
    border: none;
    background-color: #fff;
    width: max-content;
    height: var(--height);
    line-height: var(--height);
    cursor: pointer;

    & svg {
        transition: transform .25s ease;
    }

    &.isExpand {
        & svg {
            transform: rotate(180deg);
        }
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: currentColor;
        transition: width .25s ease;
    }

    &:hover {
        &::after {
            width: 100%;
        }
    }
}
</style>